<template>
	<view class="coupon" v-if="newCoupons.length > 0">
		<view class="marketing">
			<view class="block dir-left-nowrap cross-center" @click="setShow">
				<view class="box-grow-0 block-name">领券</view>
				<view class="big-box dir-left-nowrap cross-center" v-for="(item, index) in newCoupons" :key="index">
					<view class="box" :class="sign !== 'gift' ? theme + '-m-text ' + theme : theme + '-color'">
						满{{item.min_price}}元{{item.type == 1 ? '享' : '减'}}{{item.type == 1 ?item.discount + '折' : item.sub_price}}
						<view class="left"></view>
						<view class="right"></view>
					</view>
				</view>
				<image class="box-grow-0" src="../../../static/image/icon/arrow-right.png"></image>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" @close="show = false">
			<view class="model" @touchmove.stop.prevent>
				<view class="f-top dir-left-nowrap main-between cross-center">
					<view class="f-title">可领取优惠券</view>
					<view class="f-image" @click="show = false">
						<image class="f-img" src="/static/image/icon/icon-close.png"></image>
					</view>
				</view>
				<scroll-view scroll-y class="f-scroll">
					<view class="f-scroll-content">
						<view class="f-item dir-top-nowrap" v-for="(item, index) in coupons" :key="index">
							<view class="f-item-top">
								<image :src="couponImg[item.is_receive == 0 ? 'coupon_enabled' : 'coupon_disabled']">
								</image>
								<view class="dir-left-nowrap main-between cross-center">
									<view class="f-text-content dir-left-nowrap cross-bottom">
										<view class="f-big-text-dis" v-if="item.type == 1">
											<text>{{item.discount}}</text>
											<text>折</text>
										</view>
										<view class="f-big-text-pri" v-else-if="item.type == 2">
											<text>￥</text>
											<text>{{item.sub_price}}</text>
										</view>
										<view class="f-small-text">
											<view>优惠券</view>
											<view>满{{item.min_price}}元使用</view>
										</view>
									</view>
									<button @click="receive(item.id, index)"
										:style="{'color': item.is_receive == 0 ? '#caa76e' : '#b4b4b4'}">{{item.is_receive == 0 ? '立即领取' : '已领取'}}</button>
								</view>
							</view>
							<view class="f-item-bottom dir-top-nowrap">
								<text v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</text>
								<text v-if="item.expire_type == `2`">有效日期：{{item.begin_time}} - {{item.end_time}}</text>
								<text class="t-omit" v-if="item.appoint_type == `3`">适用范围：全场通用</text>
								<text class="t-omit" v-else-if="item.appoint_type == `4`">适用范围：仅限当面付活动使用</text>
								<text class="t-omit" v-else-if="item.appoint_type == `5`">适用范围：仅限礼品卡使用</text>
								<text class="t-omit" v-else-if="item.appoint_type == `2`">
									<text>适用商品：</text>
									<block v-for="(goods,index) in item.goods" :key="goods.id">
										<text>{{index !== 0 ? '、' : ''}}{{goods.name}}</text>
									</block>
								</text>
								<text class="t-omit" v-else-if="item.appoint_type == `1`">
									适用分类：
									<block v-for="(cat,index) in item.cat" :key="cat.id">
										{{index !== 0 ? '、' : ''}}{{cat.name}}
									</block>
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uPopup from '../../basic-component/u-popup/u-popup.vue';
	import appExclusiveCoupon from '../../page-component/app-exclusive-coupon/app-exclusive-coupon.vue';
	import {
		mapState
	} from "vuex";
	import user from '../../../core/user.js';

	export default {
		name: 'app-goods-coupon',

		props: {
			coupons: Array,
			theme: String,
			sign: String
		},

		data() {
			return {
				show: false,
				newCoupons: []
			}
		},

		methods: {
			async receive(id, index) {
				uni.showLoading({
					mask: true,
					title: '领取中'
				});
				const e = await this.$request({
					url: this.$apiSol.coupon.receive,
					data: {
						coupon_id: id
					}
				});
				uni.hideLoading();
				if (e.code == 1) {
					uni.showModal({
						title: '提示',
						content: e.msg,
						showCancel: false,
					});
				} else {
					if (e.data.rest == 0) {
						this.$emit('change', index);
					}
					uni.showToast({
						icon: 'none',
						title: '领取成功',
						duration: 1000,
					});
				}
			},

			setShow() {
				if (user.isLogin()) {
					this.show = true;
				} else {
					this.$user.getInfo();
				}

			}

		},
		computed: {
			...mapState({
				couponImg: state => state.mallConfig.__wxapp_img.coupon,
			})
		},
		components: {
			uPopup,
			appExclusiveCoupon
		},

		watch: {
			coupons: {
				handler(data) {
					this.newCoupons = data.slice(0, 3);
				},
				deep: true,
				immediate: true
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		padding: 10upx 0 10upx 30upx;
	}

	.marketing {
		& :empty {
			margin: 0;
		}

		.block {
			background-color: #ffffff;
			font-size: #{26upx};
			color: #999999;
			height: 80upx;
			position: relative;
			padding: 0 #{24rpx} 0 #{24rpx};

			image {
				width: #{12rpx};
				height: #{22rpx};
				display: block;
				position: absolute;
				right: 24upx;
			}

			.block-name {
				margin-right: 30upx;
			}
		}
	}

	.model {
		height: #{1100upx};
		width: 750upx;

		.f-top {
			height: 105upx;
			border-bottom: 1upx solid #e2e2e2;
			padding-left: 24upx;
			background-color: #ffffff;

			.f-image {
				width: 78upx;
				height: 78upx;
				padding: 24upx;

				.f-img {
					width: 30upx;
					height: 30upx;
				}
			}
		}

		.f-scroll {
			height: 995upx;
			width: 100%;
			background-color: #f7f7f7;

			.f-scroll-content {
				padding: 0 24upx;
				height: 995upx;
				width: 100%;
			}

			.f-item {
				width: 702upx;
				height: 272upx;
				border: 1upx solid #cfcfcf;
				margin-top: 17upx;
				border-radius: 14upx;
				background-color: #ffffff;
			}

			.f-item:last-child {
				margin-bottom: 24upx;
			}

			.f-item-top {
				height: 159upx;
				position: relative;

				>image {
					height: 159upx;
					width: 100%;
				}

				>view {
					position: absolute;
					top: 0;
					width: 702upx;
					height: 159upx;
					padding: 0 24upx;
					color: #ffffff;
				}

				.dir-left-nowrap>button {
					width: 161upx;
					height: 56upx;
					line-height: 56upx;
					padding: 0;
					border: none;
					margin: 0;
					border-radius: 28upx;
					background-color: #ffffff;
					font-size: 26upx;
					text-align: center;
				}

				.f-text-content {
					padding-bottom: 25upx;
				}

				.f-big-text-dis text {
					line-height: 1;
				}

				.f-big-text-dis text:first-child {
					font-size: 56upx;
					font-weight: bold;
				}

				.f-big-text-dis text:last-child {
					font-size: 34upx;
					margin-left: 14upx;
				}

				.f-small-text {
					font-size: 24upx;
					margin-left: 27upx;
				}

				.f-big-text-pri text {
					line-height: 1;
				}

				.f-big-text-pri text:first-child {
					font-size: 27upx;
				}

				.f-big-text-pri text:last-child {
					font-size: 56upx;
					font-weight: bold;
				}
			}

			.f-item-bottom {
				height: 111upx;
				padding: 24upx;

				text {
					font-size: 22upx;
					color: #545454;
				}
			}
		}
	}

	.big-box {
		overflow: hidden;
		margin-right: 10upx;
		padding-right: 1rpx;
	}

	.box {
		border: 1upx solid;
		border-radius: 4upx;
		position: relative;
		display: inline-block;
		padding: 2upx 12upx;
		font-size: 20upx;
		transform: rotateZ(360deg);

		.left,
		.right {
			width: 10upx;
			height: 10upx;
			border-radius: 50%;
			position: absolute;
			z-index: 1;
			top: 50%;
			border: 1upx solid;
			background-color: #ffffff;
		}

		.left {
			left: 0;

			transform: translate(-51%, -50%);
		}

		.right {
			right: 0;
			transform: translate(51%, -50%);
		}
	}
</style>
